<template>
  <el-main>
    <div class="el-main">
      <el-form :model="user" :rules="rules" ref="user" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="phone">
          <el-input
              placeholder="请输入手机号"
              suffix-icon="el-icon-user-solid"
              v-model="user.phone">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              show-password
              placeholder="请输入密码"
              suffix-icon="el-icon-lock"
              v-model="user.password">
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-col :span="18">
            <el-input
                placeholder="请输入验证码"
                suffix-icon="el-icon-lock"
                v-model="user.captcha">
            </el-input>
          </el-col>
          <el-col :span="2">
            -
          </el-col>
          <el-col :span="4">
            <el-image
                style="width: 150px; height: 40px"
                :src="user.captchaUrl"
                fit="contain" @click="getCaptcha">
            </el-image>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="login('user')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-main>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return{
      user:{
        captcha:null,
        captchaUrl:null,
        cache:null
      },
      rules:{
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, message: '密码长度为8位以上', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    login(user) {
      this.$refs[user].validate((valid) => {
        if (valid) {
          this.axios.post(this.$shopHost + 'api/user/login', this.user).then(res => {
            if (res.data.result) {
              // 登录成功
              window.localStorage.setItem("token", res.data.data);
              this.$message.success("登录成功");
              this.$router.push('/list')
            } else {
              if (res.data.code == 412) {
                this.$message.error("验证码错误");
                this.getCaptcha();
              } else {
                this.$message.error(res.data.msg);
                this.getCaptcha();
              }
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    getCaptcha() {
      this.axios.get(this.$shopHost + 'api/user/getCaptcha').then(res => {
        this.user.captchaUrl = res.data.captchaUrl;
        this.user.cache = res.data.cacheName;
      });
    },
  },
  created() {
    this.getCaptcha();
  }
}
</script>

<style scoped>
.el-main {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
}
</style>